@import "@/lib/reset.scss";

.comment-list {
  @include rect(100%, auto);
  font-family: PingFang SC;
  font-weight: 500;

  >li {
    @include rect(100%, auto);
    padding: 0.12rem 0.155rem 0.13rem 0.155rem;
    @include flexbox();
    + li {
      border-top: 0.5px solid #F1F1F1;
    }

    .msg-avatar {
      width: 0.3rem;
      height: 0.3rem;
      border-radius: 50%;
      background: #efefef;
      margin-right: 0.12rem;
    }

    .msg-box {
      @include rect(100%, auto);
      @include flexbox();
      @include flex-direction(column);
      position: relative;

      >h3 {
        color: rgba(28, 28, 28, .7);
        font-size: 0.15rem;
        font-weight: 500;
        letter-spacing: 0.01rem;
      }

      .comment-text {
        color: #1C1C1C;
        font-size: 0.13rem;
        line-height: 0.2rem;
        margin: 0.05rem 0 0.03rem 0;
        font-weight: 500;
      }

      .comment-reply-p {
        .msg-time {
          color: rgba(28, 28, 28, .5);
          font-size: 0.11rem;
          padding-left: 0.005rem;
          letter-spacing: 0.0045rem;
        }

        .reply {
          display: inline-block;
          @include rect(0.46rem, 0.21rem);
          line-height: 0.21rem;
          text-align: center;
          background-color: #F6F7F9;
          color: #1C1C1C;
          @include font-size(0.12rem);
          font-weight: 500;
          border-radius: 0.1rem;
          margin-left: 0.05rem;
        }
      }

      .minor-comment-box {
        @include rect(100%, auto);
        font-family: PingFang SC;
        font-weight: 500;

        >li {
          @include rect(100%, auto);
          padding: 0.05rem 0;
          @include flexbox();

          .min-msg-avatar {
            width: 0.2rem;
            height: 0.2rem;
            border-radius: 50%;
            background: #efefef;
            margin-right: 0.05rem;
          }

          .min-msg-box {
            @include rect(100%, auto);
            @include flexbox();
            @include flex-direction(column);
            position: relative;

            >h3 {
              color: rgba(25,25,112,.7);
              @include font-size(0.13rem);
              font-weight: 500;
              letter-spacing: 0.005rem;
            }

            .min-comment-text {
              color: #1C1C1C;
              @include font-size(0.11rem);
              line-height: 0.18rem;
              font-weight: 500;
              padding-right: 0.03rem;
            }

            .min-comment-reply-p {
              height: 0.2rem;
              .min-msg-time {
                color: rgba(28, 28, 28, .5);
                @include font-size(0.09rem);
                padding-left: 0.005rem;
                letter-spacing: 0.0045rem;
              }
      
              .min-reply {
                display: inline-block;
                @include rect(0.35rem, 0.15rem);
                line-height: 0.15rem;
                text-align: center;
                background-color: #F6F7F9;
                color: #1C1C1C;
                @include font-size(0.1rem);
                font-weight: 500;
                border-radius: 0.08rem;
                margin-left: 0.05rem;
              }
            }
          }
        }
      }
    }
  }
}